<template>
  <div class="AuditDetails">
    <!-- 填写内容 -->
    <van-cell-group class="AuditDetails_input">
      <van-field v-model="data.mName" readonly label="商户名称：" />
      <van-field v-model="data.name" readonly label="联系人：" />
      <van-field
        v-model="data.phone"
        type="tel"
        label="联系电话："
        readonly
        placeholder="请输入联系电话"
      />
      <van-field v-model="data.address" readonly label="联系地址：" />
      <van-field
        v-model="data.desc"
        rows="3"
        autosize
        label="商户简介："
        readonly
        type="textarea"
        show-word-limit
      />
    </van-cell-group>
    <!-- 营业执照和logo -->
    <div class="logo">
      <h3>营业执照</h3>
      <img :src="$base.baseImg + data.businessLicense" />
      <h3>LOGO</h3>
      <img :src="$base.baseImg + data.logo" />
    </div>
    <!-- 提交按钮 -->
    <van-row class="button">
      <van-col span="11">
        <van-button
          type="primary"
          color="#D2A166"
          round
          block
          size="normal"
          @click="auditMerchant(1)"
          >通过</van-button
        >
      </van-col>
      <van-col span="11" offset="2">
        <van-button
          type="default"
          @click="auditMerchant(2)"
          round
          block
          size="normal"
          >不通过</van-button
        >
      </van-col>
    </van-row>
    <!-- 弹窗 -->
    <van-dialog v-model="show" title="驳回理由" @confirm="noAuditMerchant">
      <van-field
        v-model="excuse"
        rows="4"
        autosize
        label="理由"
        type="textarea"
        maxlength="30"
        placeholder="请输入理由"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Field, Button, Col, Row, CellGroup, Dialog, Toast } from "vant";
Vue.use(Col);
Vue.use(Row);
Vue.use(Button);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(Dialog);
@Component({})
export default class AuditDetails extends Vue {
  private data = {};
  private show: boolean = false;
  private excuse: string = "";

  private mounted(): void {
    this.$common.getAuthToken(this.getMerchant);
  }

  // 获取商户详情
  private getMerchant(e: number): void {
    this.$post(`getMerchant`, { mid: Number(this.$route.params.id) }).then(
      (res: any) => {
        if (res.code == 0) {
          this.data = res.data;
        }
      }
    );
  }
  // 通过商户
  private auditMerchant(e: number) {
    if (e == 2) {
      this.show = true;
    } else {
      this.$post(`auditMerchant`, {
        mid: Number(this.$route.params.id),
        status: e,
        excuse: this.excuse,
      }).then((res: any) => {
        if (res.code == 0) {
          Toast.success("通过成功！");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    }
  }
  // 不通过确定
  private noAuditMerchant() {
    this.$post(`auditMerchant`, {
      mid: Number(this.$route.params.id),
      status: 2,
      excuse: this.excuse,
    }).then((res: any) => {
      if (res.code == 0) {
        Toast.success("驳回成功！");
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.AuditDetails {
  width: 100%;
  box-sizing: border-box;
  .AuditDetails_input {
    margin-top: 30px;
  }
  .logo {
    width: 100%;
    margin: 30px 0 130px 0;
    padding: 30px;
    box-sizing: border-box;
    h3 {
      font-size: 30px;
      font-weight: 300;
      color: #000000;
      line-height: 2;
    }
    img {
      width: 100%;
      display: block;
      height: 300px;
      border-radius: 20px;
    }
  }
  .button {
    position: fixed;
    width: 100%;
    padding: 20px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>
